<template>
	<base-popup titleT="app.setting" :show="appStore.settingShow" @close="onClose">
		<div class="w-full h-full relative px-[35px] pt-13">
			<div class="py-[10px] flex items-center">
				<base-icon name="dark" class="text-[20px] text-t-2"></base-icon>
				<div class="ml-2">{{ $t('app.dark') }}</div>
				<div class="flex-1"></div>
				<n-switch
					:default-value="appStore.theme === 'dark'"
					size="large"
					@update:value="onThemeChange" />
			</div>
			<base-dropdown
				:options="getLangList()"
				:modelValue="appStore.lang"
				@select="onLangChange"
				border
				v-slot="{ data }">
				<div class="mt-5 py-[10px] flex items-center cursor-pointer">
					<base-icon name="language" class="text-[20px] text-t-2"></base-icon>
					<div class="ml-2">{{ $t('app.language') }}</div>
					<div class="flex-1"></div>
					<div class="mr-2">{{ data?.text }}</div>
					<base-icon name="down2" class="text-t-3"></base-icon>
				</div>
			</base-dropdown>
			<base-dropdown
				:options="enumList(Odds)"
				:modelValue="appStore.odds"
				@select="onOddsChange"
				border>
				<div class="mt-5 py-[10px] flex items-center cursor-pointer">
					<base-icon name="odds" class="text-[20px] text-t-2"></base-icon>
					<div class="ml-2">{{ $t('app.odds') }}</div>
					<div class="flex-1"></div>
					<div class="mr-2">{{ enumName(Odds, appStore.odds) }}</div>
					<base-icon name="down2" class="text-t-3"></base-icon>
				</div>
			</base-dropdown>
			<div class="mt-8 flex items-center" @click="appStore.showAbout(true)">
				<base-icon name="logo" class="text-[20px] text-t-2"></base-icon>
				<div class="ml-2">{{ $t('app.about') }}</div>
				<div class="flex-1"></div>
				<base-icon name="go" class="text-[20px] text-t-2"></base-icon>
			</div>
		</div>
		<template #footer v-if="accountStore.isLogin">
			<div class="py-10 px-23">
				<base-button :loading="loading" @click="logout">{{ $t('account.logout') }}</base-button>
			</div>
		</template>
	</base-popup>
</template>
<script lang="ts" setup>
import { NSwitch } from 'naive-ui'
import { BasePopup, BaseButton, BaseIcon, BaseDropdown } from '@/components/base'
import { Odds } from '@/enums'
import { useAppStore, useAccountStore } from '@/store'
import { useRequest } from '@/hooks'
import { getLangList, enumList, enumName, t } from '@/utils'

defineOptions({ name: 'ViewsAppSetting' })

const appStore = useAppStore()
const accountStore = useAccountStore()

const onClose = () => appStore.showSetting(false)

const onThemeChange = () => {
	// appStore.setTheme(appStore.theme === 'dark' ? 'dark' : 'dark')
	appStore.setTheme(appStore.theme === 'dark' ? 'light' : 'dark')
}

const onLangChange = (val: any) => {
	appStore.setLang(val)
}

const onOddsChange = (val: any) => {
	appStore.setOdds(val)
}

const { loading, run: logout } = useRequest(accountStore.logout, {
	showSuccess: t('logout.success'),
	showError: true,
	onSuccess: onClose
})
</script>
